<template>
	<view class="indexBig">
		<CommenHeader :title="'选择取餐地址'"></CommenHeader>
		<view class="addressBox">
			<view class="">
				<view class="">姓名：</view>
				<view class=""><u-input type="text" v-model="name" placeholder="请填写收货人姓名"></u-input></view>
			</view>
			<view class="">
				<view class="">手机号：</view>
				<view class=""><u-input type="text" v-model="phone" placeholder="请填写正确的手机号"></u-input></view>
			</view>
			<view class="address" @click="showSelect">
				<view class="">地址：</view>
				<view class="">
					<view class="">{{ addressName ? addressName : '请选择地址' }}</view>
          <u-icon class="arrow" name="arrow-right" size="36"></u-icon>
				</view>
			</view>
			<view class="" v-if="enableWriteAddressFlag">
				<view class="">房间号：</view>
				<view class=""><u-input type="text" v-model="supplyHomeCode" placeholder="请填写房间号"></u-input></view>
			</view>
			<view class="posiImg" v-if="supplyAddressImg">
				<view class="">取餐点图片：</view>
				<view class="imgContent"><image :src="supplyAddressImg[index]" v-for="(item, index) in supplyAddressImg" :key="index" mode="widthFix" class=""></image></view>
			</view>
		</view>

		<view class="commenButton" @click="submit" :class="{ check: show }">保存地址</view>
		<!-- 底部地点选择 -->
		<view class="posiBottom">
			<u-popup v-model="posiShow" mode="bottom" @touchmove.stop.prevent="" :closeable="true" :mask-close-able="false">
				<view class="posiContent">
					<view class="">无法获取到位置信息，您可手动选择大厦下单</view>
					<view class="listContent">
						<view v-for="(item, index) in addressList" :key="index" @click="checkThisAddress(item)">
							<view class="list" v-if='item.isShowAddress !== false && item.isShowAddress !== "false"'>{{ item.detail }}</view>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import { saveMyAddress, getAddressList, getMyInfo, getDetailAddressList, checkAddress, getDetailAddressListNew } from '@/utils/req/api.js';
import CommenHeader from '@/components/header/header.vue';
import { telReg } from '../../../utils/regular.js';
export default {
	components: {
		CommenHeader
	},
	data() {
		return {
			addressInfo: '',
			name: '',
			phone: '',
			address: '',
			addressName: '',
			addressId: '',
			supplyAddressCode: '',
			supplyAddressName: '',
			supplyAddressImg: '',
			posiShow: false,
			addressList: [],
			show: false,

			checkAddressInfo: '',
			enableWriteAddressFlag: false
		};
	},
	mounted() {
		// if (getApp().globalData.myLatelyAddress) {
		// 	let addressInfo = getApp().globalData.myLatelyAddress;
		// 	this.addressInfo = addressInfo;
		// 	this.addressId = addressInfo.id;
		// 	this.addressName = this.addressInfo.addressName
		// }
	},
	onShow() {
		this.getDetailAddressList();
	},
	onLoad(options) {
		if (options.addressId) {
			this.addressId = options.addressId;
		}
		this.merchantIds = options.merchantIds || '';
	},
	methods: {
		async checkAddress() {
			let res = await checkAddress({
				addressId: this.addressId
			});
			let { nameTakingMeal, phoneTakingMeals, addressId, supplyAddressCode, supplyAddressName, addressDetails, supplyHomeCode } = res.data.result;
			console.log('myInfo', res);
			this.name = nameTakingMeal;
			this.phone = phoneTakingMeals;
			this.addressId = addressId;
			this.enableWriteAddressFlag = addressDetails.enableWriteAddress == '是' ? true : false;
			if (addressId) {
				this.supplyAddressCode = supplyAddressCode;
				this.supplyAddressName = supplyAddressName;
				this.supplyHomeCode = supplyHomeCode;
				if (addressDetails.supplyAddressImg) {
					this.supplyAddressImg = addressDetails.supplyAddressImg.split(',');
				}
				this.addressName = this.addressList[0].addressName + supplyAddressName + '(' + supplyAddressCode + ')';
			}
		},
		async getDetailAddressList() {
			/* let res = await getDetailAddressList({
				addressId: this.addressId
			}); */
			let res = await getDetailAddressListNew({
				addressId: this.addressId,
				merchantIds: this.merchantIds,
			});
			console.log('res', res);
			res.data.result.forEach(item => {
				item.detail = item.addressName + item.supplyAddressName + '(' + item.supplyAddressCode + ')';
			});
			this.addressList = res.data.result;
			console.log('this.addressList', this.addressList);

			this.checkAddress();
		},
		showSelect() {
			this.posiShow = true;
		},
		checkThisAddress(item) {
			console.log('item', item);
			this.myAddress = item;
			getApp().globalData.myLatelyAddress = item;
			this.addressId = item.id;
			this.addressName = item.detail;
			this.supplyAddressName = item.supplyAddressName;
			this.supplyAddressCode = item.supplyAddressCode;
			this.supplyAddressImg = item.supplyAddressImg ? item.supplyAddressImg.split(',') : '';
			this.enableWriteAddressFlag = item.enableWriteAddress == '是' ? true : false;
			this.posiShow = false;
		},
		async submit() {
			if (!this.name) {
				this.$showToast.call(this, '请输入您的名称', 'warning');
				return;
			}
			if (!this.phone) {
				this.$showToast.call(this, '请输入您的电话', 'warning');
				return;
			}
			if (!telReg.test(this.phone)) {
				this.$showToast.call(this, '请输入正确的手机号', 'warning');
				return;
			}
			if (!this.addressId) {
				this.$showToast.call(this, '请选择您的地址', 'warning');
				return;
			}
			if (this.enableWriteAddressFlag && !this.supplyHomeCode) {
				this.$showToast.call(this, '请填写您的房间号', 'warning');
				return;
			}
			// if (this.enableWriteAddressFlag && this.supplyHomeCode) {
			// 	if (isNaN(this.supplyHomeCode)) {
			// 		this.$showToast.call(this, '房间号请填写数字', 'warning');
			// 		return;
			// 	}
			// }
			let obj = {
				nameTakingMeal: this.name,
				phoneTakingMeals: this.phone,
				addressId: this.addressId,
				supplyAddressName: this.supplyAddressName,
				supplyAddressCode: this.supplyAddressCode,
				supplyHomeCode: this.supplyHomeCode
			};
			let res = await saveMyAddress(obj);
			if (res.data.success) {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	},
	watch: {
		name() {
			if (this.name && this.phone && this.addressName) {
				this.show = true;
			}
		},
		phone() {
			if (this.name && this.phone && this.addressName) {
				this.show = true;
			}
		},
		addressName() {
			if (this.name && this.phone && this.addressName) {
				this.show = true;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.indexBig {
	min-height: 100vh;
	background: linear-gradient(0.45deg, #f5f5f5 6.52%, #ff8739 58.65%, #fb690f 98.93%);
	background-size: 100vw 466rpx;
	background-repeat: no-repeat;
	background-color: #f5f5f5;
	padding: 40rpx 20rpx;
	padding-bottom: 150rpx;

	.addressBox {
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
		padding: 48rpx 40rpx;
		margin: 40rpx 0;

		.address {
			/deep/.u-input {
			}

			> view {
				> view:nth-child(1) {
					width: calc(100% - 35rpx);
					line-height: 1.5;
				}
			}
		}

		> view {
			@include flexs(space-between, center);
			margin: 20rpx 0;
			position: relative;
			font-size: 30rpx;
			line-height: 60rpx;

			> view:nth-child(1) {
				width: 30%;
			}

			> view:nth-child(2) {
				width: 70%;
			}

			/deep/.u-input {
				width: 100%;
				border-bottom: 1px solid rgba(0, 0, 0, 0.05);
				border-color: rgba(0, 0, 0, 0.05) !important;
			}

			/deep/.u-input,
			/deep/.u-input__input {
				height: 84rpx;
				line-height: 84rpx;
				min-height: auto !important;
			}

			> view {
				> .arrow {
					width: 30rpx;
					height: 30rpx;
					position: absolute;
					right: 0;
					top: calc((100% - 30rpx) / 2);
				}
			}
		}

		> .posiImg {
			display: block;

			> view {
				width: 100%;

				&:nth-child(2) {
					width: 100%;
				}
			}

			> .imgContent {
				// padding-bottom: 100%;
				// position: relative;
				// image {
				// 	position: absolute;
				// 	left: 0;
				// 	top: 0;
				// 	bottom: 0;
				// 	right: 0;
				// 	// max-width: 100%;
				// 	// max-height: 100%;
				// 	width: 100%;
				// 	height: 100%;

				// 	margin: 0 auto;
				// }
			}
		}
	}

	.commenButton {
		width: 70%;
		border-radius: 50rpx;
		background-color: #c5c5c5;
		color: #fff;
		line-height: 1;
		padding: 30rpx 0;
		font-size: 32rpx;
		margin: 0 auto;
		margin-top: 80rpx;
	}

	.check {
		background-color: #fa690a;
	}
}

.indexBig {
	.posiBottom {
		/deep/.u-drawer-bottom {
			width: 100% !important;
			max-height: 80vh !important;
			padding: 36rpx 20rpx 40rpx 20rpx;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			min-height: 30vh;
		}

		.u-drawer > .u-drawer-content > .u-drawer__scroll-view > .uni-scroll-view > .uni-scroll-view {
			overflow-y: auto !important;
		}
	}
}

.posiContent {
	> view {
		&:nth-child(1) {
			font-size: 28rpx;
			color: rgba(0, 0, 0, 0.35);
			margin-bottom: 14rpx;
		}
	}

	> .listContent {
		margin-top: 10rpx;
		// overflow-y: auto;

		.list {
			border-bottom: 1px solid #eee;
			font-size: 28rpx;
			line-height: 40rpx;
			padding: 24rpx 0;

			&:last-child {
				border-bottom: 0;
			}
		}
	}
}
</style>
<style lang="scss">
.indexBig {
	.posiBottom {
		/deep/ {
			.u-drawer__scroll-view {
				max-height: 80vh;
			}
		}
	}
}
</style>
